<template>
  <div>
    <div class="sidebar" :class="{ open: isSidebarOpen }">
      <!-- <div class="toggle" @click="toggleSidebar">
        <el-icon><ArrowRightBold /> </el-icon>
      </div> -->
      
      <nav>
        <ul>
          <li
          @click="toggleSidebar"
            class="nav-item"
          >
            <el-icon><Fold /></el-icon> 
          </li>
        </ul>
        <ul>
          <li
            class="nav-item"
            :class="{ active: activeNavItem =='/' }"
            @click="activateNavItem('/')"
          >
            <el-icon><House /></el-icon>
            <span
              >主页</span
            >
          </li>
          <li
            class="nav-item"
            :class="{ active: activeNavItem === '/myinfo' }"
            @click="activateNavItem('/myinfo')"
          >
          <el-icon><User /></el-icon>
            <span >我的</span>
          </li>
          <!-- 添加其他导航项 -->
        </ul>
        <hr />
        <ul>
          <li
            class="nav-item"
            :class="{ active: activeNavItem === '1' }"
            @click="activateNavItem('1')"
          >
          
          <el-icon><Cpu /></el-icon>
            <span >数码</span>
          </li>
          <li
            class="nav-item"
            :class="{ active: activeNavItem === '2' }"
            @click="activateNavItem('2')"
          >
          <el-icon><Bicycle /></el-icon>
            <span >远动</span>
          </li>
          <li
            class="nav-item"
            :class="{ active: activeNavItem === '3' }"
            @click="activateNavItem('3')"
          >
          <el-icon><Van /></el-icon>
            <span >汽车</span>
          </li>
          <li
            class="nav-item"
            :class="{ active: activeNavItem === '4' }"
            @click="activateNavItem('4')"
          >
          <el-icon><ForkSpoon /></el-icon>
            <span >食物</span>
          </li>
          <li
            class="nav-item"
            :class="{ active: activeNavItem === '5' }"
            @click="activateNavItem('5')"
          >
          <el-icon><SwitchFilled /></el-icon>
            <span >电竞</span>
          </li>
          <li
            class="nav-item"
            :class="{ active: activeNavItem === '6' }"
            @click="activateNavItem('6')"
          >
          <el-icon><Headset /></el-icon>
            <span >音乐</span>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script setup>
import { User, SwitchFilled, House,Fold,Bicycle,Cpu,Headset,ForkSpoon,Van } from '@element-plus/icons-vue'
import { ref } from 'vue'
import router from '@/router';
import { useRoute } from 'vue-router'
import emiter from '@/utils/bus'

const isSidebarOpen = ref(false)
const activeNavItem = ref(useRoute().path)

//将侧边栏tab的index对应位相应的视频类型
const index2Type={
  '/':'',
  '1':1, //函数activateNavItem参数为'1'时，对应的视频类型为1
  '2':2,
  '3':3,
  '4':4,
  '5':5,
  '6':6,
}

function toggleSidebar() {
  isSidebarOpen.value = !isSidebarOpen.value
}
function activateNavItem(index) {
  activeNavItem.value = index
  if(index2Type.hasOwnProperty(index)){
    //将视频类型派发
    emiter.emit('type',index2Type[index])
    router.push('/')
  }else   //否则为个人信息页
  {router.push(index)}
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  list-style: none;
  box-sizing: border-box;
}

.sidebar {
  position: fixed;
  width: 70px;
  height: 100%;
  border-radius: 10px;;
  background: rgba(123, 121, 121, 0.1);
  backdrop-filter: blur(10px);
  /* box-shadow: 0 8px 32px rgb(2, 4, 24); */
  /* border-right: 2px solid rgba(255, 255, 255, 0.09); */
  transition: 0.4s ease-in-out;
}

.sidebar.open {
  width: 360px;
  background: rgba(0, 0, 0, 0.5);
}

.sidebar .logo {
  width: 100%;
  height: 240px;
  padding: 40px 0;
  display: grid;
  align-items: center;
  justify-items: center;
}

.sidebar .logo img {
  width: 56px;
  transition: 0.4s;
}

.sidebar.open .logo img {
  width: 96px;
}

.sidebar .logo h3 {
  color: #fff;
  font-size: 36px;
  margin-top: 12px;
  font-variant: small-caps;
  pointer-events: none;
  scale: 0;
  opacity: 0;
}

.sidebar.open .logo h3 {
  scale: 1;
  opacity: 1;
  transition: 0.4s;
  transition-delay: 0.2s;
}

.sidebar .nav-title {
  color: #dadada;
  margin: 40px 0 18px;
  pointer-events: none;
  opacity: 0;
}

.sidebar.open .nav-title {
  opacity: 1;
  transition: 0.4s;
  transition-delay: 0.2s;
}

.sidebar nav {
  padding: 0 5px;
}

.sidebar nav .nav-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 4px;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  margin: 8px 0;
  color: #fff;
  transition: 0.3s;
}

.sidebar nav .nav-item.active {
  background: rgb(254,44,85) !important;
}

.sidebar nav .nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar nav .nav-item i {
  font-size: 26px;
}

.sidebar nav .nav-item span {
  font-size: 18px;
  margin-left: 8px;
  opacity: 0;
  pointer-events: none;
}

.sidebar.open nav .nav-item span {
  opacity: 1;
  pointer-events: visible;
  transition: 0.4s;
  transition-delay: 0.2s;
}

.sidebar hr {
  width: 100%;
  height: 2px;
  border-radius: 3px;
  margin: 40px 0 50px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
}

.sidebar.open hr {
  opacity: 1;
  transition: 0.4s;
}

.sidebar .toggle {
  width: 70px;
  height: 60px;
  cursor: pointer;
  position: absolute;
  color: #fff;
  top: 180px;
  right: -20px;
  font-size: 38px;
  line-height: 50%;
  text-align: center;
  border-radius: 50%;
  padding: 2px 0 2px 2px;
  background: linear-gradient(
    90deg,
    transparent 50%,
    rgba(247, 246, 246, 0.65) 50%
  );
}

.sidebar.open .toggle {
  transform: translateY(45px);
}

.sidebar .toggle i {
  right: -15%;
  bottom: -15%;
  transition: 0.4s linear;
}

.sidebar.open .toggle i {
  transform: rotateY(180deg);
}
</style>
